<template>
  <ShowCard title="基础资料" margin>
    <template v-slot:right>
      <AButton name="编辑" @click="clickHandle"></AButton>
    </template>
    <div v-if="userinfo.id">
      <div class="userinfo">
        <div class="userinfo-top">
          <div class="userinfo-top__left">
            <div class="userinfo-top__left__top">
              <div>{{ userinfo.name }}</div>
              <div>
                <i
                  :class="[
                    'iconfont',
                    userinfo.gender === GenderEnum.女 && 'icon-nv',
                    userinfo.gender === GenderEnum.男 && 'icon-nan',
                  ]"
                ></i>
              </div>
            </div>
            <div class="userinfo-top__left_bottom">
              <text>{{ userinfo.workLimit }}年经验</text>
              <text class="userinfo-top-seg">|</text>
              <text>{{ getAge(userinfo.birthday) }}岁</text>
              <text class="userinfo-top-seg">|</text>
              <text
                >期望待遇：
                {{
                  +userinfo.lowSalary === 0 || +userinfo.highSalary === 0
                    ? '面议'
                    : `${userinfo.lowSalary}-${userinfo.highSalary}`
                }}
              </text>
            </div>
          </div>
          <div class="userinfo-top__right">
            <i class="iconfont icon-31dingwei"></i>
            <span>{{ userinfo.city }}</span>
          </div>
        </div>
        <Divider />
      </div>
      <div class="userinfo-middle">
        <ATag title="期望工作" :value="userinfo.category" />
        <ATag title="最高学历" :value="EducationEnum[userinfo.education]" />
        <ATag title="婚姻状态" :value="MarriageEnum[userinfo.marriage]" />
        <ATag
          title="籍贯"
          style="margin-right: '5px'"
          :value="`${userinfo.nativeProvince || ''}·${userinfo.nativeCity || ''}`"
        />
        <ATag title="联系电话" :value="userinfo.phone" />
      </div>
    </div>
    <Divider v-if="userinfo.id" />
    <div v-for="v in userinfo.certificateList" class="v-tag" :key="v">
      {{ v }}
    </div>
  </ShowCard>
</template>
<script>
import { toRef } from 'vue';
import { ShowCard, AButton, ATag, Divider } from '@/components';
import { EducationEnum, GenderEnum, MarriageEnum } from '@/enum';
import { getAge } from '@/utils/date';
import { RESUME_BASE_EDIT } from '@/const/h5';
import ParamsUtil from '@/utils/params';
import Taro from '@tarojs/taro';
import { useResumeStore } from '@/stores';
import './index.less';

export default {
  components: {
    ATag,
    AButton,
    Divider,
    ShowCard,
  },
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },

  setup(props) {
    const userinfo = toRef(props, 'data');
    const store = useResumeStore();
    const clickHandle = () => {
      store.reload = true;
      Taro.navigateTo({
        url: `/pages/webview/index?redirect=${encodeURIComponent(
          ParamsUtil.addParams(RESUME_BASE_EDIT, { id: userinfo.value.id })
        )}`,
      });
    };
    return {
      userinfo,
      getAge,
      clickHandle,
      EducationEnum,
      GenderEnum,
      MarriageEnum,
    };
  },
};
</script>
